import { useState } from 'react'
import BaseLayout from '@/layouts/BaseLayout/BaseLayout'
import Codepensvg from '@/utils/Codepensvg'
import Copysvg from '@/utils/Copysvg'
import { Avatar, Icon } from 'ygbh'
import classNames from 'classnames';

function Case1(props:any) {
	const codeUrl = 'https://codepen.io/xiebaolin/pen/PoKGBRR';
	const codeVal = `
	import { Avatar } from 'ygbh';
	ReactDOM.render(
	  <>
	    <div>
		<Avatar size={64} icon={<Icon name="user-solid"></Icon>} />
		<Avatar size="large" icon={<Icon name="user-solid"></Icon>} />
		<Avatar icon={<Icon name="user-solid"></Icon>} />
		<Avatar size="small" icon={<Icon name="user-solid"></Icon>} />
	    </div>
	  </>,
	  mountNode,
	);
	`;
	//实例-start
	const [showCoreFlag, setShowCoreFlag] = useState(false);
	
	const classString = classNames('source-case-mod', {
		'show-case-core': showCoreFlag,
	});
	const toggleCoreFlag = () => {
		setShowCoreFlag(!showCoreFlag);
	};
	const copyCaseFn = () => {
		let input:any = document.getElementById("globalInputCopy");
		input.value = codeVal; // 修改文本框的内容
		input.select(); // 选中文本
		document.execCommand("copy");
		input = null;
		alert('复制成功');
	};
	const onError1 = () => {
		console.log('onError', 11);
		return false;
	};
	return (<div className="demo-block">
	    <section className={classString}>
	        <section className="code-box-demo">
	            <div>
					<Avatar size={64} icon={<Icon name="user-solid"></Icon>} />
					<Avatar size="large" icon={<Icon name="user-solid"></Icon>} />
					<Avatar icon={<Icon name="user-solid"></Icon>} />
					<Avatar size="small" icon={<Icon name="user-solid"></Icon>} />
				</div>

				<div>
					<Avatar shape="square" size={64} icon={<Icon name="user-solid"></Icon>} />
					<Avatar shape="square" size="large" icon={<Icon name="user-solid"></Icon>} />
					<Avatar shape="square" icon={<Icon name="user-solid"></Icon>} />
					<Avatar shape="square" size="small" icon={<Icon name="user-solid"></Icon>} />
				</div>
	        </section>
	        <section className="code-box-meta">
	            <div className="code-box-title">基本</div>
	            <div className="code-box-description">基本标签的用法，可以通过添加 closable 变为可关闭标签。可关闭标签具有 onClose 事件。</div>
	            <div className="code-box-actions">
	            	<a href={codeUrl} className="code-box-code-action code-box-code-action1" target='_blank' title='在 CodePen 中打开'>
	            		<Codepensvg></Codepensvg>
	            	</a>
	            	<span className="code-box-code-action code-box-code-action2" title='复制代码' onClick={copyCaseFn}>
	            	    <Copysvg></Copysvg>
	            	</span>
	            	<span className="code-box-code-action code-box-code-action3" title='显示代码' onClick={toggleCoreFlag}></span>
	            </div>
	        </section>
	        <section className="highlight-wrapper">
	            <textarea className="demo-core-box height200" readOnly={true} defaultValue={codeVal}></textarea>
	        </section>
		</section>
	</div>);
}

function Case2(props:any) {
	const codeUrl = 'https://codepen.io/xiebaolin/pen/PoKGBRR';
	const codeVal = `
	import { Avatar } from 'ygbh';
	ReactDOM.render(
	  <>
	    <div>
		<Avatar>U</Avatar>
		<Avatar src="https://joeschmoe.io/api/v1/random" alt='无法显示' draggable={true} onError={onError1} />
		<Avatar src={<img src="https://joeschmoe.io/api/v1/random" style={{ width: 32 }} />} />
	    </div>
	  </>,
	  mountNode,
	);
	`;
	//实例-start
	const [showCoreFlag, setShowCoreFlag] = useState(false);
	
	const classString = classNames('source-case-mod', {
		'show-case-core': showCoreFlag,
	});
	const toggleCoreFlag = () => {
		setShowCoreFlag(!showCoreFlag);
	};
	const copyCaseFn = () => {
		let input:any = document.getElementById("globalInputCopy");
		input.value = codeVal; // 修改文本框的内容
		input.select(); // 选中文本
		document.execCommand("copy");
		input = null;
		alert('复制成功');
	};
	const onError1 = () => {
		console.log('onError', 11);
	};
	return (<div className="demo-block">
	    <section className={classString}>
	        <section className="code-box-demo">
	            <div>
					<Avatar>U</Avatar>
	            	<Avatar src="https://joeschmoe.io/api/v1/random" alt='无法显示' draggable={true} onError={onError1} />
	            	<Avatar src={<img src="https://joeschmoe.io/api/v1/random" style={{ width: 32 }} />} />
				</div>
	        </section>
	        <section className="code-box-meta">
	            <div className="code-box-title">基本</div>
	            <div className="code-box-description">基本标签的用法，可以通过添加 closable 变为可关闭标签。可关闭标签具有 onClose 事件。</div>
	            <div className="code-box-actions">
	            	<a href={codeUrl} className="code-box-code-action code-box-code-action1" target='_blank' title='在 CodePen 中打开'>
	            		<Codepensvg></Codepensvg>
	            	</a>
	            	<span className="code-box-code-action code-box-code-action2" title='复制代码' onClick={copyCaseFn}>
	            	    <Copysvg></Copysvg>
	            	</span>
	            	<span className="code-box-code-action code-box-code-action3" title='显示代码' onClick={toggleCoreFlag}></span>
	            </div>
	        </section>
	        <section className="highlight-wrapper">
	            <textarea className="demo-core-box height200" readOnly={true} defaultValue={codeVal}></textarea>
	        </section>
		</section>
	</div>);
}


function Demo() {
	return (
		<BaseLayout>
		    <h2 className="intro-title">Avatar 头像</h2>
		    <p className="intro-content">用来代表用户或事物，支持图片、图标或字符展示。</p>
			<h3 className="show-case-title">代码演示</h3>
			{/*演示*/}
			<Case1></Case1>
			<Case2></Case2>

		    {/*介绍*/}
			<h3 className="base-title">Attributes</h3>
			<table className="attri-table">
				<thead>
					<tr>
						<th>参数</th>
						<th>说明</th>
						<th>类型</th>
						<th>默认值</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>alt</td>
						<td>图像无法显示时的替代文本</td>
						<td>string</td>
						<td>--</td>
					</tr>
					<tr>
						<td>src</td>
						<td>图片类头像的资源地址或者图片元素</td>
						<td>string | ReactNode</td>
						<td>--</td>
					</tr>
					<tr>
						<td>className</td>
						<td>分割线样式类</td>
						<td>string</td>
						<td>--</td>
					</tr>
					<tr>
						<td>size</td>
						<td>设置头像的大小</td>
						<td>string</td>
						<td>number | large | small</td>
					</tr>
					<tr>
						<td>onError</td>
						<td>图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为</td>
						<td>--</td>
						<td>--</td>
					</tr>
					<tr>
						<td>draggable</td>
						<td>图片是否允许拖动</td>
						<td>boolean | 'true' | 'false'</td>
						<td>--</td>
					</tr>
					<tr>
						<td>shape</td>
						<td>指定头像的形状</td>
						<td>circle | square</td>
						<td>circle</td>
					</tr>
				</tbody>
			</table>
		</BaseLayout>
	)
}

export default Demo
